
  <div class="layui-card">
    <div class="layui-card-body">
      <div class="layui-form-item" style="margin-bottom: 15px;">
        <div class="layui-inline">
          <button class="layui-btn" onclick="addRule()"><i class="layui-icon layui-icon-add-1"></i> 添加规则</button>
          <button class="layui-btn layui-btn-primary" onclick="fetchRules()"><i class="layui-icon layui-icon-refresh"></i> 刷新</button>
        </div>
        <div class="layui-inline" style="float: right;">
          <div class="layui-badge layui-bg-blue" style="font-size: 12px; padding: 5px 10px;">仅支持Linux系统</div>
        </div>
      </div>

      <!-- 表格 -->
      <table class="layui-table" lay-skin="line">
        <thead>
          <tr>
            <th width="80">规则ID</th>
            <th width="100">协议</th>
            <th width="150">端口</th>
            <th width="200">源IP地址</th>
            <th width="100">动作</th>
            <th width="120">数据包数</th>
            <th width="120">流量</th>
            <th width="80">状态</th>
            <th width="200">操作</th>
          </tr>
        </thead>
        <tbody id="firewallTableBody">
          <tr>
            <td colspan="9" style="text-align: center; padding: 20px;">
              <i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
              加载中...
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

<script>
layui.use(['layer', 'form'], function(){
  var layer = layui.layer;
  var form = layui.form;
  
  var rulesData = [];
  
  // 获取防火墙规则
  window.fetchRules = function() {
    fetch('/firewall/list')
      .then(response => response.json())
      .then(result => {
        if (result.code === 0 && result.data) {
          rulesData = result.data;
          renderTable();
        } else {
          layer.msg(result.msg || '数据加载失败', {icon: 2});
        }
      })
      .catch(error => {
        console.error('Error:', error);
        layer.msg('请求失败: ' + error.message, {icon: 2});
      });
  }
  
  // 渲染表格
  function renderTable() {
    var tbody = document.getElementById('firewallTableBody');
    var html = '';
    
    if (rulesData.length === 0) {
      html = '<tr><td colspan="9" style="text-align: center; padding: 20px;">暂无防火墙规则</td></tr>';
    } else {
      for (var i = 0; i < rulesData.length; i++) {
        var rule = rulesData[i];
        
        // 协议标签颜色
        var protocolClass = '';
        switch(rule.protocol) {
          case 'tcp': protocolClass = 'layui-bg-blue'; break;
          case 'udp': protocolClass = 'layui-bg-green'; break;
          case 'icmp': protocolClass = 'layui-bg-orange'; break;
          default: protocolClass = 'layui-bg-gray'; break;
        }
        
        // 动作标签颜色
        var actionClass = '';
        switch(rule.action) {
          case 'ACCEPT': actionClass = 'layui-bg-green'; break;
          case 'DROP': actionClass = 'layui-bg-red'; break;
          case 'REJECT': actionClass = 'layui-bg-orange'; break;
          default: actionClass = 'layui-bg-gray'; break;
        }
        
        // 状态
        var statusHtml = rule.enabled ? 
          '<span class="layui-badge layui-bg-green">已启用</span>' : 
          '<span class="layui-badge layui-bg-gray">已禁用</span>';
        
        html += '<tr>';
        html += '<td>' + rule.id + '</td>';
        html += '<td><span class="layui-badge ' + protocolClass + '">' + rule.protocol + '</span></td>';
        html += '<td>' + (rule.port || '-') + '</td>';
        html += '<td>' + (rule.source_ip || '任意') + '</td>';
        html += '<td><span class="layui-badge ' + actionClass + '">' + rule.action + '</span></td>';
        html += '<td>' + (rule.packets || '0') + '</td>';
        html += '<td>' + (rule.bytes || '0') + '</td>';
        html += '<td>' + statusHtml + '</td>';
        html += '<td>';
        html += '<button class="layui-btn layui-btn-xs layui-btn-danger" onclick="deleteRule(' + rule.id + ')"><i class="layui-icon layui-icon-delete"></i> 删除</button>';
        html += '</td>';
        html += '</tr>';
      }
    }
    
    tbody.innerHTML = html;
  }
  
  // 添加规则
  window.addRule = function() {
    layer.open({
      type: 1,
      title: '添加防火墙规则',
      area: ['500px', '450px'],
      content: `
        <div style="padding: 20px;">
          <form class="layui-form" id="addRuleForm">
            <div class="layui-form-item">
              <label class="layui-form-label">协议</label>
              <div class="layui-input-block">
                <select name="protocol" lay-verify="required">
                  <option value="">请选择</option>
                  <option value="tcp">TCP</option>
                  <option value="udp">UDP</option>
                  <option value="icmp">ICMP</option>
                  <option value="all">全部</option>
                </select>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">端口</label>
              <div class="layui-input-block">
                <input type="text" name="port" placeholder="例: 80 或 8000:9000" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">源IP地址</label>
              <div class="layui-input-block">
                <input type="text" name="source_ip" placeholder="留空表示任意IP" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">动作</label>
              <div class="layui-input-block">
                <select name="action" lay-verify="required">
                  <option value="">请选择</option>
                  <option value="ACCEPT">ACCEPT (允许)</option>
                  <option value="DROP">DROP (丢弃)</option>
                  <option value="REJECT">REJECT (拒绝)</option>
                </select>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">备注</label>
              <div class="layui-input-block">
                <input type="text" name="comment" placeholder="规则说明" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="addRuleSubmit">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </form>
        </div>
      `,
      success: function(layero, index) {
        form.render();
        
        form.on('submit(addRuleSubmit)', function(data) {
          var loading = layer.load(2);
          
          var formData = new URLSearchParams();
          formData.append('protocol', data.field.protocol);
          formData.append('port', data.field.port || '');
          formData.append('source_ip', data.field.source_ip || '');
          formData.append('action', data.field.action);
          formData.append('comment', data.field.comment || '');
          
          fetch('/firewall/add', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: formData.toString()
          })
          .then(response => response.json())
          .then(result => {
            layer.close(loading);
            if (result.code === 0) {
              layer.msg('添加成功', {icon: 1});
              layer.close(index);
              fetchRules();
            } else {
              layer.msg(result.msg || '添加失败', {icon: 2});
            }
          })
          .catch(error => {
            layer.close(loading);
            console.error('Error:', error);
            layer.msg('请求失败', {icon: 2});
          });
          
          return false;
        });
      }
    });
  }
  
  // 删除规则
  window.deleteRule = function(id) {
    layer.confirm('确定要删除此防火墙规则吗？', {
      icon: 3,
      title: '删除确认'
    }, function(index) {
      var loading = layer.load(2);
      
      var formData = new URLSearchParams();
      formData.append('id', id);
      
      fetch('/firewall/delete', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: formData.toString()
      })
      .then(response => response.json())
      .then(result => {
        layer.close(loading);
        if (result.code === 0) {
          layer.msg('删除成功', {icon: 1});
          layer.close(index);
          fetchRules();
        } else {
          layer.msg(result.msg || '删除失败', {icon: 2});
        }
      })
      .catch(error => {
        layer.close(loading);
        console.error('Error:', error);
        layer.msg('请求失败', {icon: 2});
      });
    });
  }
  
  // 页面加载时获取数据
  fetchRules();
});
</script>
